<template>
  <div class="home clear">
    <div class="nav">
      <el-col :span="12">
        <el-menu
          :default-active="openIndex"
          class="el-menu-vertical-demo"
          @select="clickNav"
          background-color="#2e4050"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="/Administrator">
            <i class="el-icon-s-data"></i>
            <span slot="title">数据大屏</span>
          </el-menu-item>
          <el-menu-item index="/Administrator/student">
            <i class="el-icon-user-solid"></i>
            <span slot="title">学生列表</span>
          </el-menu-item>
          <el-menu-item index="/Administrator/teacher">
            <i class="el-icon-s-promotion"></i>
            <span slot="title">老师列表</span>
          </el-menu-item>
          <el-menu-item index="/Administrator/expert">
            <i class="el-icon-message-solid"></i>
            <span slot="title">专家列表</span>
          </el-menu-item>
          <el-menu-item index="/Administrator/aMyInf">
            <i class="el-icon-s-grid"></i>
            <span slot="title">个人资料</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
    <div class="mains">
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      openIndex: "",
    };
  },
  mounted() {
    this.openIndex = this.$route.fullPath;
  },
  methods: {
    clickNav(index) {
      this.$router.push(index);
    },
  },
};
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  background: url("../../assets/img/bg4.jpeg") no-repeat;
  background-size: 100% 105%;
  background-attachment: fixed;
}
.nav {
  width: 200px;
  height: 100%;
  backdrop-filter: blur(5px);
}
.el-col-12 {
  width: 100%;
  height: 100%;
  border: 0;
}
.el-menu,
ul.el-menu.el-menu--inline {
  width: 100%;
  height: 100%;
}
.home-list {
  padding-left: 20px;
  display: flex;
  /* justify-content: space-between; */
  align-content: flex-start;
  flex-wrap: wrap;
}
.home div.mains {
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

</style>
